<template>
	<view class="userInfo">
		<view v-if="userInfo" class=" pad-10">
			<view class="between center">
				<view class="start-center">
					<image v-if="userInfo.campusImage" class="img-campus" :src="hostApi+userInfo.campusImage">
					</image>
					<image v-else class="img-campus" src="/static/images/campus/campuslogo.png"></image>
					<view class="campus-name">{{userInfo.campusName}}</view>
				</view>
				<image class="img-erweima" src="../../static/images/icon/qrcode.png" mode="" @click="showCode = true">
				</image>
			</view>
			<view style="margin: 20px 0;">
				<view class="flex-start baseline mar-5-0">
					<view class="name">{{userInfo.patName}}</view>
					<view class="pat-sex">{{userInfo.patSex == 1 ? '男' : '女'}}</view>
					<view v-if="age">{{age}} 岁</view>
				</view>
				<view class="pat-id">就诊卡：{{userInfo.patId}}</view>
				<view class="flex-start">
					<view class="check-card" @click="toCardListPage">切换就诊卡</view>
				</view>
			</view>


		</view>
		<view v-else class="no-band-card" @click="toLogin">
			<view>
				<image class="img-plus" src="/static/images/patient/plus.png"></image>
				<view>初次使用，请绑定就诊人</view>
			</view>
		</view>
		<List v-show="showCode || showUserList" :showCode='showCode' :showUserList='showUserList' @close='onClose'>
		</List>
	</view>
</template>
<script>
	var dayjs = require('dayjs')
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import {
		getValue
	} from '@/common/js/common.js'
	import List from '@/components/UserInfo/list.vue'
	import {
		selectCampus
	} from '../../api/campus';
	export default {
		components: {
			List
		},
		data() {
			return {
				showCode: false, // 是否展示二维码
				showUserList: false, // 是否展示用户切换列表
				logo: '',
				dataSource: [],
			}
		},
		computed: {
			...mapGetters(['userInfo', 'systemParams', 'userList', 'hospitalInfo', "hostApi"]),
			age() {
				let idCard = this.userInfo.certId + "";
				return new Date().getFullYear() - idCard.substring(6, 10)
			}
		},
		mounted() {
		},
		methods: {
			...mapActions(['setUserList', "getHospitalInfo"]),
			toCardListPage() {
				uni.navigateTo({
					url: '/pages/Login/patientCardList'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/Login/addPatient'
				})
			},
			onClose(type) {
				this[type] = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.campus-name {
		height: 15px;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 10px;
		color: #999999;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.img-campus {
		width: 14px;
		height: 14px;
		border-radius: 16rpx;
	}

	.pat-id {
		color: #666666;
		font-size: 12px;
	}

	.pat-sex {
		margin: 0 10px;
	}

	.img-erweima {
		width: 24px;
		height: 24px;
	}

	.userInfo {
		width: 49%;
		height: 360rpx;
		background-image: url($mk-base+"/static/images/bg-header/bg_card.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.check-card {
		background-color: white;
		border-radius: 30px;
		padding: 5px 10px;
		color: #47A1B0;
		margin-top: 30px;
		font-size: 12px;
	}

	.img-plus {
		width: 40px;
		height: 40px;
	}

	.no-band-card {
		height: 160px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #3C99A8;
	}
</style>